<template>
	<div class="wrap">	
		<div class="head">
            <div class="left">
		    	 <div class="headline">			  	    	 	 
		    	 	 <span class="title">设备活跃数</span>			  	    	 	 
		    	 </div>  
		    	 <div class="numberWrap">
		    	 	<span v-for="item in activeDevices" class="type2 type">{{item}}</span>
		    	 </div>		    	 
            </div>
            <div class="right">
		    	 <div class="headline">			  	    	 	 
		    	 	 <span class="title">非设备活跃数</span>			  	    	 	 
		    	 </div>  
		    	 <div class="numberWrap">
		    	 	<span v-for="item in noActiveDevices" class="type2 type">{{item}}</span>
		    	 </div>	            	
            </div>
    	</div>
    	 
		<div class="body">
	    	<div class="headline">			  	    	 	 
	    	 	 <span class="title">近一年预警数</span>			  	    	 	 
	    	</div>      	 	
            <e-chart autoresize :options="chartOptions" class="charts" style="height: 85%;"></e-chart>
    	 </div>
    	 
	</div>
</template>	
<script>
	import {getAbnormalNum} from "@/api/bigScreen/bigScreen";
	export default {
		data() {
			return {				
			   activeDevices:[],
			   noActiveDevices:[],
			   chartOptions:{		   	
				    color: ['#3398DB'],
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
				            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        top:'10%',
				        bottom: '5%',
				        containLabel: true
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: [],
				            axisTick: {
				                alignWithLabel: true
				            },
	                        axisLabel: {
	                            color: '#fff'
	                        }				            
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
					        axisLabel:{
					        	color: '#fff'
					        }				            
				        }
				    ],
				    series: [
				        {
				            name: '预警数',
				            type: 'bar',
				            barWidth: '60%',
				            data: []
				        }
				    ]
				}			   	
			   
			}
		},
		mounted() {
           this.init()
		},
		methods: {
		   formatArr(str,len){
		   	 let arr=[]
		   	 let zero=len-str.length
           	 for(var i=0;i<zero;i++){
           	 	arr.push('0')
           	 }	
           	 for(var i=0;i<str.length;i++){
           	 	arr.push(str[i])
           	 }  
           	 return arr
		   },			
           init(){
           	 // 获取预警数量
           	 getAbnormalNum().then(res=>{
           	 	let arr=res.data.data
           	 	for(var i=0;i<arr.length;i++){
           	 		this.chartOptions.xAxis[0].data.push(arr[i].date)
           	 		this.chartOptions.series[0].data.push(arr[i].abnormalNum)
           	 	}
           	 })
           },
           init2(deviceNum){
           	  let num1=parseInt(deviceNum*0.98)
           	  let num2=deviceNum-num1
           	  num1=num1.toString()
           	  num2=num2.toString()
           	  this.activeDevices=this.formatArr(num1,5)
           	  this.noActiveDevices=this.formatArr(num2,5)
           	  
           }
		}
	}
</script>
<style lang="scss" scoped>
.wrap{display: flex;flex-direction: column;height: 100%;}
.head{display: flex;margin-bottom: 4px;
   .left{width: 48%;margin-right: 4%;}
   .right{width: 48%;}
}
.body{flex: 1;
  
}
.headline{
		display: flex;
		color: #fff;		
		.title{
      background: #131420;
      padding: 8px 15px;
      display: inline-block;
      font-size: 14px;
		    box-shadow: inset 0 0 10px 0 rgba(53,145,255,.8);
		    border: 1px solid #3591ff80;          
		}
}	
.numberWrap{height: 60px;display: flex;justify-content: space-around;
   .type{display: flex;height: 100%;background: #17213e;font-size: 45px;  align-items: center;justify-content: center; 
   color: #20dbfd;
   text-shadow: 0 0 25px #00d8ff;
   text-align: center;font-family:yjsz}
   .type1{width: 9%;}
   .type2{width: 19%;}
}
</style>
